<template>
  <div>
    <div class="quote-board price-list" style="position: relative;">
      <div class="line">
        <ul>
          <li v-for="(item,index) in type" :key="item.id">
            <input type="radio" :id="item.id" :checked="index==0" name="front">
            <label :for="item.id">{{item.name}}</label>
          </li>
        </ul>
        <button class="back" @click="goBack">返回上一步</button>
      </div>
      <div class="line">
        <ul>
          <li @click="tablabel('all')">
            <input type="radio" id="021" checked name="tect">
            <label for="021">全部</label>
          </li>
          <li  @click="tablabel('application')">
            <input type="radio" name="tect" id="022">
            <label for="022">应用逻辑</label>
          </li>
          <li @click="tablabel('technology')">
            <input type="radio" name="tect" id="023">
            <label for="023">技术选型</label>
          </li>
          <li @click="tablabel('functions')">
            <input type="radio" name="tect" id="024">
            <label for="024">功能开发评估</label>
          </li>
          <li @click="tablabel('uis')">
            <input type="radio" name="tect" id="025">
            <label for="025">UI设计评估</label>
          </li>
          <li @click="tablabel('frontEnd')">
            <input type="radio" name="tect" id="026">
            <label for="026">前端开发评估</label>
          </li>
          <li @click="tablabel('online')">
            <input type="radio" name="tect" id="027">
            <label for="027">上线部署评估</label>
          </li>
          <li @click="tablabel('summary')">
            <input type="radio" name="tect" id="028">
            <label for="028">汇总</label>
          </li>
        </ul>
      </div>
      <div v-if="isShow.application" class="date-time content">
        <h4>应用逻辑（默认一般逻辑）</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>工时</th>
            <th>说明</th>
          </tr>
          <tr v-for="(item,index) in logic" :key="item.id">
            <td>
              <input type="radio" :id="item.id" name="logic">
              {{item.name}}
            </td>
            <td>{{item.cycle}}</td>
            <td>{{item.des}}</td>
          </tr>
        </table>
      </div>
      <div v-if="isShow.technology" class="date-time content">
        <h4>技术选型</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>要求</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>功能开发</td>
            <td>
              <label v-for="(item,index) in language1" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" name="tech">
                   {{item.name}}
                </span>
              </label>
            </td>
            <td>
              <div v-for="(item,index) in language1" :key="item.id"> {{item.name}}:  {{item.des}}</div>
            </td>
          </tr>
        </table>
        <table border="1">
          <tr>
            <th>应用版本</th>
            <th>应用范畴</th>
            <th>应用语言</th>
          </tr>
          <tr>
            <td rowspan="2">
              <input type="checkbox" name="system">
              电脑版
            </td>
            <td>前端开发</td>
            <td>
              <label v-for="(item,index) in language2" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" name="tech">
                   {{item.name}}
                </span>
              </label>

            </td>

          </tr>
          <tr>
            <td>ui设计</td>
            <td>
              <label v-for="(item,index) in language3" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" name="tech">
                   {{item.name}}
                </span>
              </label>
            </td>

          </tr>

          <tr>
            <td rowspan="2">
              <input type="checkbox" name="system">
              手机版
            </td>
            <td>前端开发</td>
            <td>
              <label v-for="(item,index) in language2" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" name="tech">
                   {{item.name}}
                </span>
              </label>
            </td>

          </tr>
          <tr>
            <td>ui设计</td>
            <td>
              <label v-for="(item,index) in language3" :key="item.id">
                <span>
                  <input type="radio" :id="item.id" name="tech">
                   {{item.name}}
                </span>
              </label>
            </td>

          </tr>
        </table>
      </div>

      <div v-if="isShow.functions" class="date-time content" style="position: relative;">
        <h4>功能评估（默认是核心功能）</h4>
        <table border="1">
          <tr>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>功能</th>
            <th>子功能</th>
            <th>工时（小时）</th>
            <th>总计（小时）</th>
          </tr>

          <tr  @mouseenter="showLeft" @mouseleave="hiddenLeft">
            <td rowspan="6">通用</td>
            <td rowspan="4">会员1</td>
            <td rowspan="2">
              <input type="radio">
              登录
            </td>
            <td rowspan="2">
              <input type="radio">
              登录
            </td>
            <td>
              <input type="radio">
              账号密码登录
            </td>
            <td>2</td>
            <td>2</td>
          </tr>


          <tr @mouseenter="showLeft" @mouseleave="hiddenLeft">
            <td>
              <input type="radio">
              手机验证码登录
            </td>
            <td>2</td>
            <td>2</td>
          </tr>


          <tr @mouseenter="showLeft" @mouseleave="hiddenLeft">
            <td rowspan="2">
              <input type="radio">
              注册
            </td>
            <td rowspan="2">
              <input type="radio">
              注册
            </td>
            <td>
              <input type="radio">
              账号密码注册
            </td>
            <td>2</td>
            <td>2</td>
          </tr>

          <tr @mouseenter="showLeft" @mouseleave="hiddenLeft">
            <td>
              <input type="radio">
              手机验证码注册
            </td>
            <td>2</td>
            <td>2</td>
          </tr>




          <tr @mouseenter="showLeft" @mouseleave="hiddenLeft">
            <td rowspan="2">会员2</td>
            <td rowspan="2">
              <input type="radio">
              首页
            </td>
            <td rowspan="2">
              <input type="radio">
              数据加载
            </td>
            <td>
              <input type="radio">
              数据对接
            </td>
            <td>2</td>
            <td>2</td>
          </tr>


          <tr @mouseenter="showLeft" @mouseleave="hiddenLeft">
            <td>
              <input type="radio">
              手机验证码登录
            </td>
            <td>2</td>
            <td>2</td>
          </tr>




          <tr>
            <td>总计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>4</td>
            <td>4</td>
          </tr>
        </table>
        <div class="leftModel" :style="{top: top + 'px'}">
          <div style="position: relative;" class="san">
            <h2>功能点描述</h2>
            <div>鼠标移动到对应的功能点上，此处会显示功能点说明</div>
          </div>
        </div>
      </div>


      <!--UI设计评估-->
      <div v-if="isShow.uis" class="date-time content ui">
        <h4>页面设计评估（默认不需要）</h4>
        <table border="1">
          <tr>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>页面数（个）</th>
            <th>
              <label>
                <input type="radio" value="0" v-model="uiIsNeed">
                <img src="../../assets/img/radio.png" width="17" v-if="uiIsNeed == 0">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="uiIsNeed != 0">
                不需要
              </label>
              <label>
                <input type="radio" value="1" v-model="uiIsNeed">
                <img src="../../assets/img/radio.png" width="17" v-if="uiIsNeed != 0">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="uiIsNeed == 0">
                需要
              </label>
            </th>
            <th>工时（小时）

            </th>
            <th>总计（小时）</th>
          </tr>

          <tr v-for="(item, i) in pages" :key="item.id">
            <td>{{item.plate_name}}</td>
            <td>{{item.childe_plate_name}}</td>
            <td>{{item.name}}</td>
            <td>1</td>
            <td>
              <label>
                <input type="radio" name="login" value="0" v-model="item.need">
                <img src="../../assets/img/radio.png" width="17" v-if="item.need == 0">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="item.need != 0">
                不需要
              </label>
              <label>
                <input type="radio" name="login" value="1" v-model="item.need">
                <img src="../../assets/img/radiofalse.png" width="16" v-if="item.need != 1">
                <img src="../../assets/img/radio.png" width="17" v-if="item.need == 1">
                需要
              </label>
            </td>
            <td>{{item.techenology_select.technology[0][1]}}</td>
            <td>{{item.allTime}}</td>
          </tr>
          <tr>
            <td>总计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>6</td>
          </tr>
        </table>
      </div>


      <div v-if="isShow.frontEnd" class="date-time content">
        <h4>页面制作评估（默认是仿制）</h4>
        <table border="1">
          <tr>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>页面数（个）</th>
            <th>要求
              <label for="">
                <input type="radio" name="page">
                不需要
              </label>
              <label for="">
                <input type="radio" checked name="page">
                仿制
              </label>
              <label for="">
                <input type="radio" name="page">
                手写
              </label>
            </th>
            <th>工时（小时）</th>
            <th>总计（小时）</th>
          </tr>

          <tr v-for="(item, i) in pages" :key="item.id">
            <td>{{item.plate_name}}</td>
            <td>{{item.childe_plate_name}}</td>
            <td>{{item.name}}</td>
            <td>1</td>
            <td>
              <label for="">
                <input type="radio" name="normalPage">
                不需要
              </label>
              <label for="">
                <input type="radio" checked name="normalPage">
                仿制
              </label>
              <label for="">
                <input type="radio" name="normalPage">
                手写
              </label>
            </td>
            <td>{{item.techenology_select.technology[0][1]}}</td>
            <td>4</td>
          </tr>
     

          <tr>
            <td>总计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>6</td>
          </tr>
        </table>
      </div>


      
      <div v-if="isShow.online" class="date-time content">
        <h4>上线部署要求</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>工时（小时）</th>
          </tr>
          <tr  v-for="(item,index) in deploy" :key="item.id">
            <td>{{item.name}}</td>
            <td>{{item.cycle}}</td>
          </tr>

        </table>
      </div>
      <div v-if="isShow.summary" class="date-time content" >
        <h4>汇总</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>开发工时（小时）</th>
            <th>单价：（90元/小时）</th>
            <th>费用（元）</th>
          </tr>
          <tr>
            <td>应用逻辑</td>
            <td>23</td>
            <td>20</td>
            <td>90</td>
          </tr>
          <tr>
            <td>功能开发</td>
            <td>23</td>
            <td>20</td>
            <td>90</td>
          </tr>
          <tr>
            <td>页面设计</td>
            <td>23</td>
            <td>20</td>
            <td>90</td>
          </tr>
          <tr>
            <td>页面制作</td>
            <td>23</td>
            <td>20</td>
            <td>90</td>
          </tr>
          <tr>
            <td>上线部署</td>
            <td>23</td>
            <td>20</td>
            <td>90</td>
          </tr>
          <tr>
            <td>总计</td>
            <td>23</td>
            <td>20</td>
            <td>90</td>
          </tr>
        </table>
      </div>

    </div>
    <div class="calculate">
      <button>
        <router-link class="link" to="/quote/step2Setting">下一步</router-link>
      </button>
    </div>
  </div>
</template>

<script>
 import axios from 'axios'
  export default{
    name:'step2list',
    created: function() {
          var that=this;
          axios.get(this.HOST+'/api/Index/Pinggu')
              .then(function (response) {
                  var info=response.data.data.info;
                  console.log(info);
                  that.type=info.type;
                  that.logic=info.logic;
                  that.language1=info.language_1;
                  that.language2=info.language_2;
                  that.language3=info.language_3;
                  that.deploy=info.deploy;
                  that.plate=plate;
              })
              .catch(function (response) {
                  console.log(response);
              });
    },
    data() {
      return {
        top: -2000,
        uiIsNeed: 0,
        type:[],
        logic:[],
        language1:[],
        language2:[],
        language3:[],
          deploy:[],
        plate:[], 
        uiData: [
          {title: '通用', model: '会员', name: '登录', num: 1, need: 0, time: 4, allTime: 8},
          {title: '通用', model: '会员', name: '登录', num: 1, need: 0, time: 4, allTime: 8},
          {title: '通用', model: '会员', name: '登录', num: 1, need: 0, time: 4, allTime: 8}
        ],
        isShow: {
          application: true,
          technology: true,
          functions: true,
          uis: true,
          frontEnd: true,
          online: true,
          summary: true
        }
      }
    },
    methods: {
      // tab切换
      tablabel(item){
        if(item == 'all'){
          for(let i in this.isShow){
            this.isShow[i] = true;
          }
        }else {
          for(let i in this.isShow){
            this.isShow[i] = false;
            if(i == item){
              this.isShow[i] = true;
            }
          }
        }
      },
      goBack() {
        this.$router.go(-1);
      },
      showLeft(e){
        this.top = e.offsetY + 24;
      },
      hiddenLeft(e){
        console.log(1,e)
      }
    },
    watch: {
      'uiIsNeed': function (msg) {
        if(parseInt(msg)){
          for(let item of this.uiData){
            item.need = 1
          }
        }else {
          for(let item of this.uiData){
            item.need = 0
          }
        }
      }
    }
  }
</script>
<style>
</style>
<style scoped>
  .ui label{
    position: relative;
  }
  .ui label input{
    opacity: 0;
  }
  .ui label>img{
    position: absolute;
    top: 0;
    left: -2px;
    z-index: 10;
  }

  .leftModel .san:before{
    content: '';
    border: 15px solid transparent;
    border-right-color: white;
    position: absolute;
    left: -37px;
    top: 30px;
    margin-top: -20px;
  }
  .leftModel{
    position: absolute;
    z-index: 100;
    right: -228px;
    width: 228px;
    background-color: white;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px 7px;
  }
  .leftModel h2{
    color: #01c1dd;
    font-size: 14px;
    padding: 10px 0;
  }
  .quote-board {
    margin: 2rem auto 0;
    max-width: 980px;
    padding: 3rem 3rem 4rem;
    border-radius: .4rem;
    background-color: #fff;
    width: 100%;
  }
  .price-list h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .price-list .line {
    padding-top: 1.2rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .price-list .line button {
    width: 7rem;
    height: 2.4rem;
    font-size: 1rem;
    color: #fff;
    background: #4289db;
    border-radius: 0.4rem;
    cursor: pointer;
  }
  .price-list .line ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid hsla(212,9%,63%,.3);
  }
  .price-list .line ul li {
    position: relative;
    width: 7rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #979fa8;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    border-left: 1px solid hsla(212,9%,63%,.3);
  }
  .price-list .line ul li label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .price-list .line ul li:first-child {
    border-left: none;
  }
  .price-list .line ul li input[type="radio"] {
    position: absolute;
    top: 0;
    visibility: hidden;
  }
  .price-list .line ul li input[type="radio"]:checked + label {
    background: #4289db;
    color: #fff;
  }
  .price-list .date-time {
    width: 100%;
    margin: 40px auto 0;
    background: #f3f5f7;
    padding-bottom: 1.2rem;
  }
  .price-list .date-time h4 {
    font-size: 1.2rem;
    padding: 0.7rem;
    text-align: center;
    color: #fff;
    background: #c9ccd2;
  }
  .price-list .date-time table {
    width: 94%;
    padding: 0 1rem;
    background: #fff;
    border-collapse:collapse;
    border-color: hsla(212,9%,63%,.2);
    margin: 1rem auto;
  }
  .price-list .date-time table:first-child {
    margin-top: 0;
  }
  .price-list .date-time table td, .price-list .date-time table th {
    padding: 0.5rem;
    text-align: center;
  }
  .price-list .date-time table th {
    /*background: #dfe3e6;*/
  }
  .price-list .date-time table label {
    margin-left: 1rem;
  }
  .calculate {
    margin: 2.5rem auto;
    text-align: center;
  }
  .calculate button {
    width: 33%;
    height: 4.1rem;
    line-height: 2.1rem;
    font-size: 1.5rem;
    min-width: 17rem;
    color: #fff;
    float: none;
    cursor: pointer;
    border-radius: .4rem;
    border: 0;
    box-shadow: 0 3px 3px rgba(45,51,56,.2);
    outline: none;
    -webkit-appearance: button;
    background-color: #4289db;
  }
  .calculate button .link {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 4.1rem;
  }
</style>
